<!--
 * @Description: useBase64（Base64转码）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:34:55
 * @LastEditTime: 2022-12-30 11:09:24
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <h3>文本转换</h3>
    <div class="flex mt10">

      <div>文本
        <el-input v-model="textValue" @input="handleTextChange" type="textarea" :rows="8"></el-input>
      </div>
      <div class="ml54">
        <div>Base64
          <el-input v-model="textBase64Value" type="textarea" :rows="8"></el-input>
        </div>
      </div>
    </div>
  </div>

  <div class="mt30">
    <h3>文件转换</h3>
    <div class="flex mt10">
      <div>
        <div>
          <div>选择文件</div>
          <input mt-2 type="file" @input="onFileInput">
        </div>
      </div>
      <div class="ml54">
        <div>Base64
          <el-input v-model="fileBase64Value" type="textarea" :rows="10"></el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue';
import { useBase64 } from '@vueuse/core';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    function initState() {
      return {
        textValue: '',
        textBase64Value: '',

        fileBase64Value: '',
      };
    }
    const state = reactive(initState());
    function handleTextChange(val) {
      state.textBase64Value = useBase64(val).base64;
    }
    function onFileInput(e) {
      state.fileBase64Value = useBase64(e.target.files[0]).base64;
    }
    return {
      ...toRefs(state),
      handleTextChange,
      onFileInput,
    };
  },
};
</script>